<template>
	<view id="doctor">
		<!-- 咨询导航 -->
		<view class="outter-nav">
			<ConsultNav :SmallTitle="smalltitle"></ConsultNav>
		</view>
		<!-- 朋辈简介 -->
		<view class=" docfrind-cont" v-for="(dat,index) in FriendData" :key="index">
			<DocterOrFrindDetail>
				<template v-slot:img>
					<image :src="dat.photoAdress" style="width:140rpx;height:140rpx;border-radius: 50%;"></image>
				</template>
				<template v-slot:Name>
					<text>{{dat.name}}</text>
				</template>
				<template v-slot:subject>
					<text>
						{{dat.college}}
					</text>
				</template>
				<template v-slot:feacher>
					<text>{{dat.hobby}}</text>
				</template>
				<template v-slot:btn1>
					<view @click="goDetail(dat)" class="btn1">详情</view>
				</template>
				<template v-slot:btn2>
					<view @click="GoToChat(dat)" class="btn1">咨询预约</view>
				</template>
			</DocterOrFrindDetail>
		</view>
	</view>
</template>

<script>
	import ConsultNav from '../../components/ConsultNav.vue'
	import DocterOrFrindDetail from '../../components/DocterOrFrindDetail.vue'
	export default {
		data() {
			return {
				smalltitle: '朋辈推荐',
				FriendData: [],
			}
		},
		methods: {
			goDetail(data) {
				uni.navigateTo({
					url: `/pages/Introduce/Introduce?data=${JSON.stringify(data)}`
				})
				this.$store.dispatch('ReceveData', data)
			},
			//得到朋辈数据
			async getFriendData() {
				let res = this.$store.dispatch('getAllFriendInfo')
				res.then(() => {
					this.FriendData = this.$store.state.docter.FriendInfo
				})
			},
			//
			GoToChat(data) {
				console.log('预约', data)
				uni.$emit('accepname', data.name)
				uni.navigateTo({
					url: `/pages/Chat/Chat?adress=${data.adress}&workTime=${data.workTime}&phone=${data.phone}`
				})
			}
		},
		components: {
			ConsultNav,
			DocterOrFrindDetail
		},
		mounted() {
			this.getFriendData()
		},

	}
</script>

<style lang="scss" scoped>
	#doctor {
		width: 750rpx;
		height: auto;

		.outter-nav {
			width: 90%;
			height: 250rpx;
			// background-color: antiquewhite;
			margin: 0 auto;
		}

		// 
		.docfrind-cont {
			width: 90%;
			height: auto;

			text {
				font-size: 25rpx;
				line-height: 40rpx;
				padding-left: 25rpx;

				&:last-child {
					height: auto;
					color: #6d6d6d;
				}
			}

			.btn1 {
				width: 150rpx;
				height: 50rpx;
				color: #ffffff;
				font-size: 25rpx;
				border-radius: 30rpx;
				background-color: #4095e5;
				text-align: center;
				line-height: 50rpx;
			}
		}
	}
</style>
